window.onload = function () {
    var foods = document.getElementById('foods')[0]
    var step = document.getElementById('step')[0]
    var inputFile = document.querySelectorAll('[type="file"]')[0]
    var inputFile1 = document.querySelectorAll('[type="file"]')[1]
    document.querySelector('#img').onclick = function () {
        inputFile.click()
    }
    document.querySelector('#imgmin').onclick = function () {
        inputFile1.click()
    }
}

function loadFile(inputFile) {
    var fileReader = new FileReader()
     tiantu = document.getElementById('tiantu')
    var reg = /^image/gi
    var flag = reg.test(inputFile.files[0].type)
    if (inputFile.files[0].size < Math.pow(1024,2) && flag) {
        fileReader.onload = function (e) {
           document.querySelector('#imgadd').src = e.target.result
        }
        fileReader.readAsDataURL(inputFile.files[0])
        tiantu.innerHTML = ''
    } else {
        alert("图片上传失败！")
    }
}

function loadFile1(inputFile1) {
    var fileReader1 = new FileReader()
    var imgmintu = document.getElementById('imgmintu')
    var reg = /^image/gi
    var flag = reg.test(inputFile1.files[0].type)
    if (inputFile1.files[0].size < Math.pow(1024,2) && flag) {
        fileReader1.onload = function (e) {
            document.querySelector('#imgminadd').src = e.target.result
        }
        fileReader1.readAsDataURL(inputFile1.files[0])
        imgmintu.innerHTML = ''
    } else {
        alert("图片上传失败！")
    }
}

function add(){
    var newDiv = document.createElement('div')
    newDiv.className = "list"
    newDiv.innerHTML = `<input type="text">
                        <input type="text">
                        <img src="images/badd.PNG" class="icon" onclick="add()">
                        <img src="images/bup.PNG" class="icon" onclick="moveup(this)">
                        <img src="images/bdown.PNG" class="icon" onclick="movedown(this)">
                        <img src="images/bdel.PNG" class="icon" onclick="del(this)">`
    foods.appendChild(newDiv)
}
function del(obj){
    if(confirm("你确定删除吗？")){
        var divDelete = obj.parentNode
        var father = divDelete.parentNode
        father.removeChild(divDelete)
    }
}
function moveup(obj){
    var divMoveUp = obj.parentNode
    var father = divMoveUp.parentNode
    var MoveUp = divMoveUp.previousElementSibling
    var MoveUp1 = MoveUp.previousElementSibling.previousElementSibling.previousElementSibling
    if(!MoveUp1){
        alert('已经到顶了，不能再上移了！')
    }else{
        father.insertBefore(divMoveUp,MoveUp)
    }  
}
function movedown(obj){
    var divMoveDown = obj.parentNode
    var father = divMoveDown.parentNode
    var moveDown = divMoveDown.nextElementSibling
    if(!moveDown){
        alert('已经到底了，不能再下移了！')
    }else{
        father.insertBefore(moveDown,divMoveDown)
    }  
}

function stepadd(){
    var newStepDiv = document.createElement('div')
    newStepDiv.className = "stepbox"
    newStepDiv.innerHTML = `<div id="imgmin">
                                <img src="" alt="" id="imgminadd">
                                <p id="imgmintu">添加步骤图</p>
                            </div>
                            <input type="file" name="" id="" onchange="loadFile2(this)">
                            <div class="right">
                                <textarea name="" placeholder="具体步骤如下："></textarea>
                                <div id="stepicon">
                                    <img src="images/bstepup.PNG" class="stepicon" onclick="stepmoveup(this)">
                                    <img src="images/bstepdown.PNG" class="stepicon" onclick="stepmovedown(this)">
                                    <img src="images/bstepadd.PNG" class="stepicon" onclick="stepadd()">
                                    <img src="images/bstepdel.PNG" class="stepicon" onclick="stepdel(this)">
                                </div>
                            </div>`
    step.appendChild(newStepDiv)
}
function stepdel(obj){
    if(confirm("你确定删除吗？")){
        var divStepDelete = obj.parentNode.parentNode.parentNode
        var father = divStepDelete.parentNode
        father.removeChild(divStepDelete)
    }
}
function stepmoveup(obj){
    var divStepMoveUp = obj.parentNode.parentNode.parentNode
    var father = divStepMoveUp.parentNode
    var StepMoveUp = divStepMoveUp.previousElementSibling
    var StepMoveUp1 = StepMoveUp.previousElementSibling.previousElementSibling.previousElementSibling.previousElementSibling
    if(!StepMoveUp1){
        alert('已经到顶了，不能再上移了！')
    }else{
        father.insertBefore(divStepMoveUp,StepMoveUp)
    }  
}
function stepmovedown(obj){
    var divStepMoveDown = obj.parentNode.parentNode.parentNode
    var father = divStepMoveDown.parentNode
    var StepmoveDown = divStepMoveDown.nextElementSibling
    if(!StepmoveDown){
        alert('已经到底了，不能再下移了！')
    }else{
        father.insertBefore(StepmoveDown,divStepMoveDown)
    }  
}
